<template>
  <div>
    <el-form label-position="top" ref="dataForm" :model="record" :rules="recordRules"  label-width="80px" >
      <el-form-item label="项目名称" prop="name">
        <el-input v-model="record.name" size="small" placeholder="请输入项目名称"></el-input>
      </el-form-item>
      <el-form-item label="版本号" prop="version">
        <el-input v-model="record.version" size="small" placeholder="请输入项目版本号"></el-input>
      </el-form-item>
      <el-form-item label="项目类型" prop="type">
        <el-select v-model="record.type" size="small" placeholder="请选择项目类型">
          <el-option
            v-for="item in optionsLabelArr"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <!--<el-form-item label="排序号" prop="sort">-->
      <!--<el-input v-model="record.sort" size="small" placeholder="请输入排序号"></el-input>-->
      <!--</el-form-item>-->
    </el-form>
    <div class="menu-navbar">
      <el-button size="small" type="primary" @click="createSave('dataForm')">确 定</el-button>
      <el-button size="small" @click="closeSave">取 消</el-button>
    </div>
  </div>
</template>

<script>
  import {
    copyProject
  } from '@/api/apiModel/apiProject.js'
  export default {
    name: 'projectCopyCom',
    data() {
      // let sortValid = (rule, value, callback) => {
      //   if (!value) {
      //     return callback()
      //   }
      //   setTimeout(() => {
      //     if (!/^(0|-?[1-9][0-9]*)$/.test(value)) {
      //       callback(new Error('排序号只能为整数'))
      //     } else {
      //       callback()
      //     }
      //   }, 100)
      // }
      return {
        isloading: false,
        optType: '', // 操作类型
        optionsLabelArr: [ // 项目类型下拉数据
          {
            value: '1',
            label: 'Web'
          },
          {
            value: '2',
            label: 'App'
          },
          {
            value: '3',
            label: 'PC'
          },
          {
            value: '4',
            label: '硬件/物联网'
          },
          {
            value: '9',
            label: '其他'
          }
        ],
        record: {
          id: '',
          name: '',
          type: '',
          version: ''
        },
        recordRules: {
          name: [
            { message: '项目名称不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 255, message: '最大长度为 255 个字符', trigger: 'blur' }
          ],
          type: [
            { message: '项目类型不能为空', required: true, trigger: 'change' }
          ],
          version: [
            { message: '版本号不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 64, message: '最大长度为 64 个字符', trigger: 'blur' }
          ]
          // sort: [
          //   { message: '排序号不能为空', required: true, trigger: 'blur' },
          //   { validator: sortValid, trigger: 'blur' }
          // ]
        }

      }
    },
    props: ['componentCustomProps'],
    created() {
      this.initPage()
    },
    methods: {
      initPage() {
        this.record.id = this.componentCustomProps.projectId
        this.record.name = this.componentCustomProps.projectName + '-副本'
        this.record.type = this.componentCustomProps.projectType
        this.record.version = '1.0'
      },
      createSave(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveRecord()
          } else {
            this.$message({
              type: 'error',
              message: '复制失败!'
            })
            console.log('error save!!')
            return false
          }
        })
      },
      saveRecord() {
        let args = {
          oldProjectId: this.record.id,
          newName: this.record.name,
          newType: this.record.type,
          newVersion: this.record.version
        }
        copyProject(args).then(res => {
          if (res.data.success) {
            this.$emit('closeDialog', true)
            this.$message({
              type: 'success',
              message: '复制成功!'
            })
          } else {
            this.$message({
              type: 'error',
              message: '复制失败!'
            })
          }
        }).catch((err) => {
          console.log(err)
          this.$message({
            type: 'error',
            message: '复制失败!'
          })
        })
      },
      closeSave() { // 取消按钮
        this.$emit('closeDialog')
      }
    }
  }
</script>

<style scoped>
  .menu-navbar{
    text-align: right;
  }
</style>
